<template>
  <div class="login">
    <Header :setModelType="setModelType"></Header>
    <div class="login-main">
      <div class="login-main-card">
        <div class="login-main-card-title">
          {{ cardTitle }}
          <span style="color: rgba(0, 0, 0, 0.5)"> ({{ modelType }})</span>
        </div>
        <el-form
          ref="ruleFormRef"
          :model="userData"
          :rules="userRules"
          label-width="80px"
          class="login-main-card-form"
        >
          <el-form-item label="用户名:" prop="name">
            <el-input v-model="userData.name"></el-input>
          </el-form-item>
          <el-form-item label="密码:" prop="password">
            <el-input
              v-model="userData.password"
              type="password"
              show-password
              auto-complete="new-password"
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if="cardTitle === '登录'"
            style="margin-top: 40px; margin-left: 35px"
          >
            <el-button style="width: 100px" type="primary" @click="onSubmit()"
              >登录</el-button
            >
            <el-button style="width: 100px" @click="setCardTitle">注册</el-button>
          </el-form-item>
          <el-form-item
            v-if="cardTitle === '注册'"
            style="margin-top: 40px; margin-left: 75px"
          >
            <el-button style="width: 100px" @click="registered">注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="login-bottom"></div>
  </div>
</template>
<script lang="ts" setup>
import {ElForm, ElMessage} from "element-plus"
import {ref, reactive} from "vue"
import {useRouter} from "vue-router"
import Header from "../components/Header.vue"
import {Login} from "../api"
type FormInstance = InstanceType<typeof ElForm>
const modelType = ref("")
const cardTitle = ref("登录")
const ruleFormRef = ref<FormInstance>()
const router = useRouter()
const userData = ref({
  name: "",
  password: ""
})
const userRules = reactive({
  name: [
    {
      required: true,
      message: "请输入用户名",
      trigger: "blur"
    }
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur"
    },
    {
      min: 6,
      message: "密码不能少于6位",
      trigger: "blur"
    }
  ]
})
// 学生版教师版切换方法
const setModelType = () => {
  modelType.value === "teacher"
    ? (modelType.value = "student")
    : (modelType.value = "teacher")
  window.localStorage.setItem("modelType", modelType.value)
  console.log("modelType", modelType.value)
}
modelType.value = window.localStorage.getItem("modelType")
  ? window.localStorage.getItem("modelType")!
  : "teacher"
// 用户登录方法
const onSubmit = async () => {
  const res = await Login.userLogin({...userData.value, userType: modelType.value})
  if (res.data.code == 0) {
    ElMessage({
      message: res.data.msg,
      type: "success"
    })
    window.localStorage.setItem("token", res.data.data.token)
    window.localStorage.setItem("user", JSON.stringify(res.data.data.admin))
    router.push({
      name: "home"
    })
  } else {
    ElMessage.error(res.data.msg)
  }
}
// 用户注册方法
const registered = async () => {
  const res = await Login.addUser({...userData.value, identity: modelType.value})
  if (res.data.code == 0) {
    ElMessage({
      message: res.data.msg,
      type: "success"
    })
    cardTitle.value = "登录"
  } else {
    ElMessage.error(res.data.msg)
  }
}
//登录注册切换按钮
const setCardTitle = () => {
  cardTitle.value = "注册"
}
</script>
<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100vh;
  color: rgba(0, 0, 0, 1);
  position: relative;
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background-image: url("../assets/login.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;
    opacity: 0.3;
    z-index: -1;
    width: 100%;
    height: 100%;
  }
  &-header {
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(225, 255, 255, 0.5);
    &-title {
      line-height: 40px;
      font-size: 20px;
    }
    &-type {
      span {
        width: 60px;
        padding: 0 15px;
      }
    }
  }
  &-main {
    padding: 18% 0 10% 65%;
    &-card {
      width: 400px;
      height: 200px;
      border: 1.5px solid rgba(225, 255, 255, 1);
      border-radius: 18px;
      padding: 50px;
      &-title {
        font-size: 20px;
        line-height: 40px;
      }
      &-form {
        margin-top: 20px;
        width: 90%;
      }
    }
  }
}
</style>
